<template>
  <div>
    <el-container>
      <el-header style="background-color: #545c64">
        <img src="@/assets/logo.webp" style="width: 40px;position: relative;top: 10px">
        <span style="font-size: 20px;margin-left: 15px;color: white">高中生考前压力测评系统</span>
        <el-dropdown style="float: right;height: 60px;line-height: 60px">
          <span class="el-dropdown-link" style="color: white;font-size: 16px">{{user.name}}<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logout()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
    </el-container>

    <el-container>
      <el-aside style="overflow: hidden;min-height: 100vh;background-color: #545c64;width: 200px">
        <el-menu
            :default-active="$route.path"
            router
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-menu-item index="/home">
            <i class="el-icon-s-flag"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="/admin" v-if="user.role === '管理员'">
            <i class="el-icon-s-custom"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="/exam" >
            <i class="el-icon-circle-check"></i>
            <span slot="title">开始测试</span>
          </el-menu-item>
          <el-submenu index="2"v-if="user.role === '管理员'|| user.role === '教师'">
            <template slot="title">
              <i class="el-icon-edit"></i>
              <span slot="title">试题管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/type">试题分类</el-menu-item>
              <el-menu-item index="/paper">试题信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/grades" v-if="user.role === '管理员'|| user.role === '教师'">
            <i class="el-icon-paperclip"></i>
            <span slot="title">成绩管理</span>
          </el-menu-item>
          <el-menu-item index="/audit">
            <i class="el-icon-paperclip"></i>
            <span slot="title">反馈管理</span>
          </el-menu-item>
          <el-menu-item index="/notice" v-if="user.role === '管理员'">
            <i class="el-icon-data-board"></i>
            <span slot="title">公告管理</span>
          </el-menu-item>
          <el-menu-item index="/log" v-if="user.role === '管理员'">
            <i class="el-icon-date"></i>
            <span slot="title">日志管理</span>
          </el-menu-item>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-edit"></i>
              <span slot="title">个人中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/password">修改密码</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/ai" v-if="user.role === '学生'">
            <i class="el-icon-data-board"></i>
            <span slot="title">智能建议</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Layout",

  data(){
    return{
      user: localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}
    }
  },

  methods:{
    logout(){
      localStorage.removeItem("user");
      this.$router.push("/login")
    }
  }
}
</script>

<style>
.el-menu{
  border-right: none!important;
}
</style>